import React, {Component} from 'react'
import {TabBar} from 'antd-mobile'
import PropTypes from 'prop-types'
import {FontAwesomeIcon} from '@fortawesome/react-fontawesome'
// import { faAddressBook, faAddressCard, faEnvelope, faIdBadge } from '@fortawesome/free-solid-svg-icons'
import {withRouter} from 'react-router-dom'

const Item = TabBar.Item;

class NavFooter extends Component {

    static propTypes = {
        navList: PropTypes.array.isRequired
    };

    render () {
        let {navList} = this.props;
        // 过滤掉hide为true的nav
        navList = navList.filter(nav => !nav.hide);
        const path = this.props.location.pathname;  //路由组件才有这个属性 这里不是 获取不到
        // 在非路由组件中使用路由组件的api withRouter
        return (
            <TabBar>
                {navList.map(nav => (
                    <Item key={nav.path}
                          title={nav.text}
                          icon={<FontAwesomeIcon icon={nav.icon}/>}
                          selectedIcon={<FontAwesomeIcon icon={nav.icon} style={{color: 'red'}}/>}
                          selected={path===nav.path}
                          onPress={() => this.props.history.replace(nav.path)}
                    />
                    ))}
            </TabBar>
        )
    }
}

// 让非路由组件可以访问到路由组件的api
// 内部会向组件中传入一些路由组件特有的属性 history location math
export default withRouter (NavFooter)
